import router from '@/router'
import type {ActionContext} from 'vuex'
import config from '@/config'
import deepClone from '@/libs/deepClone'
import {RootState} from '.'
const customRouter = deepClone(config.router) as CustomRoute[]

export type AsideState = {
  currentAside: CustomRoute
  asideList: CustomRoute[]
  openKeys: string[]
  selectedKeys: string[]
  userAsideList: any[]
}
export type AsideContext = ActionContext<AsideState, RootState>

const state: AsideState = {
  currentAside: customRouter[0],
  asideList: customRouter,
  openKeys: customRouter.length ? [customRouter[0].name] : [],
  /**存储路由的meta中的name */
  selectedKeys: [],
  userAsideList: []
}

const mutations = {
  SETAsideList(state: AsideState, data: CustomRoute[]) {
    console.log('设置了侧边栏数据：', data)
    state.asideList = data
  },
  SETCurrentAside(state: AsideState, data: CustomRoute) {
    console.log('点击右边侧边栏：', data)
    state.currentAside = data
  },
  SETOPENKEYS(state: AsideState, data: string[]) {
    console.log('设置被打开了的侧边栏', data)
    state.openKeys = data
  },
  SETSELECTEDKEYS(state: AsideState, data: string) {
    console.log('设置被选择了的侧边栏', data, location)
    state.selectedKeys = data ? [data] : []
  }
}

const actions = {
  MENUCLICK({state, commit, rootGetters}: AsideContext, data: string) {
    // console.log('aside 点击', data);
    commit('SETSELECTEDKEYS', data)
  },
  MENUCHANGE({state, commit, rootGetters}: AsideContext, data: string[]) {
    // console.log('aside 变化', data);
    commit('SETOPENKEYS', data)
  }
}

const getters = {
  /**根据用户界面配置，来选择性的导出侧边栏 */
  asideList: (state: AsideState) => state.asideList,
  userAsideList: (state: AsideState) => state.userAsideList,
  currentAside: (state: AsideState) => state.currentAside,
  openKeys: (state: AsideState) => state.openKeys,
  selectedKeys: (state: AsideState) => state.selectedKeys
}

export default {
  namespaced: true, // 声明命名空间
  state,
  mutations,
  actions,
  getters
}
